<script setup>
import PageContainer from '@/components/pageContainer.vue'
import { useArticleManageStore } from '@/stores/articleManage.js'
import { useArticleCateStore } from '@/stores/articleCate.js'
import { ref } from 'vue'
import  { dayjs } from 'element-plus'
import { delArticle, recommendArticle, unRecommendArticle } from '@/api/article.js'
import { useUserStore } from '@/stores/user.js'

const articleManageStore = useArticleManageStore()
const articleCateStore = useArticleCateStore()
const userStore = useUserStore()
const edit = ref()
defineOptions({
  name: "ArticleManage"
})
const params = ref({
  pagesize: 5,
  pagenum: 1,
  cate_id: '',
  state: ''
})
const loading = ref(true)
const getArticleList = () => {
  // 这里有一个显示bug，关于选择已发布/草稿 ，功能上没有问题
  if (params.value.state === '已发布'){
    params.value.state = '1'
  } else if (params.value.state === '草稿'){
    params.value.state = '0'
  }
  articleManageStore.getList(params.value)

  loading.value = false
}
// 去拿数据
getArticleList()
// 需要拿到文章分类的列表
articleCateStore.getCateList()

// 格式化日期
const formatTime = (time) => {
  return  dayjs(time).format('YYYY年MM月DD日')
}

// 查询
const selectBtn = () => {

  // 拿我们选好的参数。去调查询
  getArticleList()
}

const resetOption = () => {
  // 重置搜索结果：重置并不是清空params
  params.value = {
    pagesize: 5,
    pagenum: 1,
    cate_id: '',
    state: ''
  }
  getArticleList()
}

// 新增
const addArticle = () => {
  edit.value.open()
}
// 编辑
const editArticle = (id) => {
  edit.value.open(id)
}
// 删除
const onDeleteArticle = async (id) => {
  await ElMessageBox.confirm('你确认删除该文章信息吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await delArticle(id)
  ElMessage({ type: 'success', message: '删除成功' })
  getArticleList()
}

// 刷新页面
const flushArtList = () => {
  getArticleList()
}


// 推荐
const onRecommend = (id) => {
  recommendArticle(id)
  const article = articleManageStore.articleList.find(item => item.id === id)
  if (article){
    article.recommend = 1
  }
  ElMessage({ type: 'success', message: '推荐成功！！！' })

}
// 取消推荐
const onUnRecommend = (id) => {
  unRecommendArticle(id)
  const article = articleManageStore.articleList.find(item => item.id === id)
  if (article){
    article.recommend = 0
  }
  ElMessage({ type: 'success', message: '取消推荐成功！！！' })

}

const onSizeChange = (size) => {
  params.value.pagenum = 1
  params.value.pagesize = size
  getArticleList()
}
const onCurrentChange = (page) => {
  params.value.pagenum = page
  getArticleList()
}

</script>

<template>
  <page-container title="文章管理">
    <!--表单区域-->
    <el-form inline>
      <el-form-item label="文章分类：">
        <el-select placeholder="请选择" clearable v-model="params.cate_id">
          <el-option v-for="item in articleCateStore.cateList"  :key="item.id" :label="item.cate_name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="发布状态：">
        <el-select placeholder="请选择" clearable v-model="params.state">
          <el-option label="已发布" value="1" />
          <el-option label="草稿" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectBtn">搜索</el-button>
        <el-button @click="resetOption">重置</el-button>
      </el-form-item>
    </el-form>
    <template #extra>
      <el-button type="primary" @click="addArticle">新增</el-button>
    </template>
    <article-edit ref="edit"  @flush="flushArtList"></article-edit>
    <!-- 文字列表区域 -->
    <el-table v-loading="loading" :data="articleManageStore.articleList" stripe style="width: 100%">
      <el-table-column type="index" label="Index" width="180" />
      <el-table-column prop="title" label="标题" width="180" />
      <el-table-column label="发布时间" >
        <!--这里的时间，我们需要向给他格式化一下-->
        <template #default="{ row }">
          {{ formatTime(row.pub_date) }}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" />
      <el-table-column prop="cate_name" label="分类" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="{ row }">
          <el-button link type="primary" @click="editArticle(row.id)">
            编辑
          </el-button>
          <el-button link type="primary" @click="onDeleteArticle(row.id)">删除</el-button>
          <!-- 用户为管理员的同时，article的recommend属性为0 -->
          <el-button link type="primary" v-show="userStore.user.username === 'jinglina' && row.recommend === 0" @click="onRecommend(row.id)" >推荐</el-button>
          <el-button link type="primary" v-show="userStore.user.username === 'jinglina' && row.recommend === 1" @click="onUnRecommend(row.id)" >取消推荐</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
      v-model:current-page="params.pagenum"
      v-model:page-size="params.pagesize"
      :page-sizes="[3, 5, 10]"
      layout="jumper, total, sizes, prev, pager, next"
      :background="true"
      :total="articleManageStore.total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </page-container>

</template>

<style lang="scss" scoped>
.el-select {
  --el-select-width: 220px;
}
</style>
